<template>
  <main>
    <div class="menu flex-row-sb-center">
      <strong>头像</strong>
      <div class="flex-row-center">
        <div class="avatar-file-box">
          <input accept="image/*" type="file" @change="changeAvatar" />
          <img-format class="avatar-img" :src="userInfo.avatar" alt="头像" />
        </div>
        <span class="icon iconfont icon-jiantou-elm"></span>
      </div>
    </div>
    <div class="menu flex-row-sb-center">
      <strong>用户名</strong>
      <div class="flex-row-center">
        <span class="info">{{userInfo.username}}</span>
        <span class="icon iconfont icon-jiantou-elm"></span>
      </div>
    </div>
    <p class="title">账号绑定</p>
    <div class="menu flex-row-sb-center">
      <strong><span class="iconfont icon-shouji"></span>手机</strong>
      <div class="flex-row-center" @click="bindPhone">
        <span class="info">{{userInfo.mobile | telEncryption}}</span>
        <span class="icon iconfont icon-jiantou-elm"></span>
      </div>
    </div>
    <p class="title">安全设置</p>
    <div class="menu flex-row-sb-center">
      <span>登录密码</span>
      <div class="flex-row-center">
        <a href="javascript:;" style="text-decoration: none;color: #0097ff;" @click="changePwd">{{userInfo.password? '修改密码' : '未设置'}}</a>
        <span class="icon iconfont icon-jiantou-elm"></span>
      </div>
    </div>
    <p class="title"></p>
    <button class="logout" @click="logoutElm">退出登录</button>
  </main>
</template>

<script>
import { uploadAvatar } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
export default {
  name: 'personal-info',
  components: {
    ImgFormat
  },
  created() {
    this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
  },
  methods: {
    logoutElm() {
      window.sessionStorage.clear()
      this.$router.push('login')
    },
    changePwd() {
      this.$router.push('/changepwd')
    },
    bindPhone() {
      this.$router.push({ name: 'bindphone', query: {
        phone: this.userInfo.mobile
      }})
    },
    async changeAvatar(e) {
      const reader = new FileReader()
      const formData = new FormData()
      formData.append('file', e.target.files[0])
      const { data } = await uploadAvatar(window.sessionStorage.getItem('USER_ID'), formData)
      console.log(data)
      reader.readAsDataURL(e.target.files[0])
      reader.onloadend = ev => {
        console.log(ev.target.result)
        document.querySelector('.avatar-img').childNodes[0].src = ev.target.result
      }
    }
  }
}
</script>

<style scoped>
  .menu {
    width: 100%;
    padding: 30px 18px;
    background-color: #fff;
    border-bottom: 1px solid #F0F0F0;
    font-size: 32px;
  }
  .icon {
    margin: 0 30px 0 5px;
    font-size: 30px;
  }
  .icon-shouji {
    color: #0097ff;
    font-size: 40px;
    vertical-align: middle;
  }
  .title {
    margin: 0;
    padding:25px 0 10px 25px;
    font-size: 26px;
    color: #818181;
  }
  .info {
    color: #565656;
  }
  .logout {
    width: 100%;
    height: 80px;
    border: none;
    font-size: 36px;
    font-weight: 600;
    color: #ff5d52;
    background-color: #fff;
  }
  .avatar-file-box {
    height: 100px;
    width: 100px;
    background-color: #eee;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }

  .avatar-img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
  }

  input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    outline: none;
  }
</style>
